/* 初始化 */
*{
  margin: 0;
  padding: 0;
  border: 0;
}
a{
  text-decoration: none;
}
.top{
   background: #000000;
   color: #ffffff;
   width: 100%;
   overflow: hidden;/*清除子元素对后续元素浮动的影响*/
   height: 80px;
}
.top_left{
  float: left;
  width: 30%;
  overflow: hidden;/*清除top_left下面的两个元素img和span的浮动*/
}
.top_left img{
  height: 50px;
  margin-top: 15px;
  float: left;
}
.top_left span{
  height: 80px;
  line-height: 80px;
  display: inline-block;/*元素是行内元素，但是具备块级元素的属性*/
  /* float: left; */
}
.top_mid{
  float: left;
  width: 40%;
}
.top_mid ul{
  list-style: none;
  width: 100%;
  overflow: hidden;
}
.top_mid ul li{
  float: left;
  width: 25%;
  text-align: center;
  height: 80px;
  line-height: 80px;/*导航菜单垂直居中*/
}
.top_mid ul li.active a{
  color: red;
}
.top_mid ul li a{
  color: #ffffff;
}
.top_right{
  float: left;
  width: 30%;
  text-align: right;
}
.top_right img{
  height: 50px;
  margin-top: 15px;
  float: right;
}
.top_right span{
  height: 80px;
  line-height: 80px;/*垂直居中*/
  display: block;/*行内元素与float不兼容，把span元素改为块级元素来应用float*/
  float: right;
  margin-left: 20px;
}
.top_right button{
  height: 40px;
  width: 100px;
  background-color: transparent;/*背景颜色随着父元素的颜色*/
  color: #ffffff;
  border: 1px solid #ffffff;/*边框*/
  border-radius: 10px;/*边框的圆角*/
  float: right;/*右浮动*/
  margin-top: 20px;
  margin-left: 20px;/*左外间距*/
}
.top_right button:hover{
  background-color: #f11234;
  color: #000000;
}
.content{
  width: 80%;
  overflow: hidden;/*清除子元素的浮动*/
  margin: 0 auto;/*让整个盒子水平居中*/
}

/* banner部分样式 */
.banner{
  background-color: #4d4b4b;
  color: #ffffff;
}
.banner_left{
  float: left;
  width: 50%;
}
.banner_left h1{
  margin-top: 100px;
  font-size: 40px;
  font-weight: 100;
}
.banner_left p{
  font-size: 14px;
  margin-top: 30px;
  line-height: 28px;/*行高*/
}
.banner_left button{
  margin-top: 30px;
  width: 200px;
  height: 50px;
  border-radius: 25px;
  font-size: 20px;
  background-color: #f11234;
  color: #ffffff;
  cursor: pointer;/*改变光标的形状为手*/
}
.banner_left button:hover{/*伪类选择符*/
  background-color: transparent;
  color: #f11234;
  border: 1px solid #f11234;
}
.banner_right{
  float: right;
  width: 40%;
}

/* 特征部分样式 */
.tezheng{
  background-color: #000000;
  color: #ffffff;
  padding: 40px 0;
}
.tezheng_box{
  float: left;
  width: 25%;/*设置浮动，每部分占比四分之一*/
  text-align: center;
}
.tezheng_box h3{
  color: #ec657a;
}
.tezheng_box p{
  font-size: 14px;
  color: #dddddd;
  margin-top: 20px;
}

/* 优势部分样式 */
.youshi{
  background-color: #e2e2e8;
  padding: 50px 0;
}
.youshi_header{
  text-align: center;
}
.youshi_header span{
  color: #da7181;
}
.youshi_header p{
  font-size: 14px;
  color: #aaaaaa;
  margin-top: 10px;
}
.youshi_body{
  margin-top: 30px;
}
.youshi_body ul{
  list-style: none;
  width: 100%;
  overflow: hidden;
}
.youshi_body li{
  float: left;
  width: 33.33%;
}
.youshi_box{
  width: 90%;
  margin: 0 auto;
  border: 1px solid red;
  border-radius: 10px;
  text-align: center;
  padding: 20px 0;
}
.youshi_box img{
  min-height: 118px;/*最小高度*/
}
.youshi_box h3{
  color: #da7181;
  margin: 15px 0;
}
.youshi_box p{
  font-size: 14px;
  color:#4d4b4b;
  width: 90%;
  margin: 0 auto;
}

/* 商店部分样式 */
.shop{
  padding: 50px 0;
}
.shop_header{
  text-align: center;
}
.shop_header span{
  display: inline-block;
  background-color: #da7181;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #ffffff;
  border-radius: 20px;
  margin: 0 20px;
}
.shop_header span.active{
  background-color: #2d2b2b;
}
.shop_body{
  margin-top: 20px;
}
.shop_body_left{
  float: left;
  width: 50%;
}
.shop_body_left h1{
  color: #b5aeae;
  font-weight: 100;
  margin-bottom: 50px;
}
.shop_body_left h1 span{
  color: #da7181;
}
.shop_body_left p{
  color: #2d2b2b;
  font-size: 12px;
  margin-bottom: 40px;
}
.shop_body_left>span{/*shop_body_left里面的子元素span*/
  display: inline-block;
  width: 200px;
  height: 50px;
  background-color: #da7181;
  color: #ffffff;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
}
.shop_body_left>span:hover{
  color: #da7181;
  background-color: transparent;
  border:1px solid #da7181;
  cursor: pointer;
}
.shop_body_right{
  float: left;
  width: 50%;
  text-align: right;
}

/* 帮助部分样式 */
.help{
  background-color: #dad6d6;
  padding: 40px 0;
}
.help_header h1{
  text-align: center;
  color: #da7181;
  font-weight: 100;
  border-bottom: 2px solid #a5a0a0;/*分割线*/
  padding-bottom: 50px;
}
.help_body{
  margin-top: 50px;
  width: 100%;
  overflow: hidden;
}
.help_body_left{
  width: 30%;
  float: left;
}
.help_body_left img{
  border-radius: 100%;/*宽度和高度一样，设置圆*/
}
.help_body_right{
  width: 70%;
  float: left;
}
.help_body_right>p{
  text-indent: 2em;
  font-size: 14px;
  color: #444040;
}
.tlp{
  margin-top: 50px;
  width: 100%;
  overflow: hidden;
}
.tlp_left{
  width: 50%;
  float: left;
}
.tlp>p{
  width: 150px;
  height: 50px;
  line-height: 50px;
  float: right;
  font-style: italic;/*斜体*/
  font-size: 30px;
}

/* 联系部分的样式 */
.contact{
  padding: 50px 0;
}
.contact_left{
  width: 60%;
  float: left;
}
.contact_left h1{
  color: #da7181;
  font-weight: 100;
  margin-bottom: 50px;
  font-size: 30px;
}
.contact_left input,textarea{
  border: 1px solid #444040;
}
.contact_left input{
  width: 200px;
  height: 30px;
  margin-bottom: 20px;
}
.contact_left input.email{
  width: 407px;
}
.contact_left textarea{
  width: 407px;
}
.contact_left input.submit{
  margin-top: 40px;
  background-color: #f11234;
  color: #ffffff;
  font-size: 22px;
  border-color: #f11234;
}
.contact_right{
  width: 40%;
  float: left;
  text-align: right;
}
.contact_right img{
  width: 90%;
}

/* 试用部分的样式 */
.shiyong{
  background-color: #000000;
  padding: 30px 0;
  color: #ffffff;
}
.shiyong p{
  height: 40px;
  line-height: 40px;
}
.shiyong p.left{
  float: left;
  font-style: italic;  
}
.shiyong p.right{
  float: right;
  background-color: #ea7b8c;
  border: 1px solid #ea7b8c;
  width: 200px;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
}
.shiyong p.right:hover{
  background-color: transparent;
  color: #ea7b8c;
}

/* 尾部部分的样式 */
.footer{
  background-color: #4d4b4b;
  color: #ffffff;
  padding: 50px 0;
}
.footer_box{
  float: left;
  width: 25%;
}
.footer_box ul{
  list-style: none;
}
.footer_box ul img{
  height: 30px;
  float: left;
  margin-right: 20px;
}
.footer_box ul li{
  margin-bottom: 10px;
}
.footer_box ul span{
  height: 30px;
  line-height: 30px;
  display: inline-block;
}
.footer_box_content{
  width: 90%;
}
.footer_box_content h3{
  margin-bottom: 30px;
  color: #f11234;
  font-weight: 100;
}
.footer_box_content p{
  font-size: 14px;
  color: #dddddd;
  line-height: 30px;
}
.footer_box_content p.aliyun{
  color: green;
  margin-bottom: 20px;
}

/* 服务页面的样式 */
